<template>
  <div class="data-operation">
    <el-tabs v-model="activeName" class="demo-tabs" :before-leave="changeData">
      <el-tab-pane label="出售中商品(8)" name="onSale"></el-tab-pane>
      <el-tab-pane label="仓库中商品(242)" name="onStore"></el-tab-pane>
      <el-tab-pane label="已经售馨商品(127)" name="nullStore"></el-tab-pane>
      <el-tab-pane label="警戒库存(169)" name="warnStore"></el-tab-pane>
      <el-tab-pane label="商品回收站(3)" name="recycleStore"></el-tab-pane>
    </el-tabs>
    <div class="input-box">
      <span class="input-info"> 商品分类： </span>
      <el-cascader v-model="upType" :options="options" placeholder="请选择" />
    </div>
    <div class="input-box">
      <span class="input-info"> 商品搜索：</span>
      <el-input
        class="search-name"
        v-model="searchName"
        placeholder="请输入名称"
      >
        <template #append
          ><el-icon><Search /></el-icon
        ></template>
      </el-input>
    </div>
    <div class="clear"></div>
    <div class="operate">
      <el-button type="primary" @click="addGoods">添加商品</el-button>
      <el-button type="success">商品采集</el-button>
      <el-button>导出</el-button>
    </div>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="ID" width="60" />
    <el-table-column prop="goodsIcon" label="商品图" width="80">
      <template #default="scope">
        <el-image
          style="height: 30px"
          :src="scope.row.goodsIcon"
          :zoom-rate="1"
          :preview-teleported="true"
          :preview-src-list="[scope.row.goodsIcon]"
          fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="商品名称" width="300" />
    <el-table-column prop="saleNumber" label="商品售价" width="100" />
    <el-table-column prop="sale" label="销量" width="100" />
    <el-table-column prop="store" label="库存" width="100" />
    <el-table-column prop="order" label="排序" width="60" />
    <el-table-column prop="addTime" label="添加时间" width="150" />
    <el-table-column fixed="right" label="状态" width="120" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #header>
        操作
        <el-icon><Setting /></el-icon>
      </template>
      <template #default>
        <el-button link type="primary" size="small">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { getGoodsList } from "@/api/goods";
import { ref } from "vue";
import { useRouter } from "vue-router";

let options = [
  {
    value: "basic",
    label: "Basic",
    children: [
      {
        value: "layout",
        label: "Layout",
      },
      {
        value: "color",
        label: "Color",
      },
      {
        value: "typography",
        label: "Typography",
      },
      {
        value: "icon",
        label: "Icon",
      },
      {
        value: "button",
        label: "Button",
      },
    ],
  },
  {
    value: "form",
    label: "Form",
    children: [
      {
        value: "radio",
        label: "Radio",
      },
      {
        value: "checkbox",
        label: "Checkbox",
      },
      {
        value: "input",
        label: "Input",
      },
      {
        value: "input-number",
        label: "InputNumber",
      },
      {
        value: "select",
        label: "Select",
      },
      {
        value: "cascader",
        label: "Cascader",
      },
      {
        value: "switch",
        label: "Switch",
      },
      {
        value: "slider",
        label: "Slider",
      },
      {
        value: "time-picker",
        label: "TimePicker",
      },
      {
        value: "date-picker",
        label: "DatePicker",
      },
      {
        value: "datetime-picker",
        label: "DateTimePicker",
      },
      {
        value: "upload",
        label: "Upload",
      },
      {
        value: "rate",
        label: "Rate",
      },
      {
        value: "form",
        label: "Form",
      },
    ],
  },
];
const router = useRouter();
let tableData: any = ref();
let upType = ref();
let searchName = ref();
const activeName = ref("onSale");
const addGoods = () => {
  router.push("/goods/addGoods");
};

const changeData = (activeName: any, oldActiveName: any) => {
  console.log(activeName, oldActiveName);
  getGoodsList({
    searchType: activeName,
  }).then((res) => {
    if (res.data.code === 200) {
      tableData.value = res.data.data.list;
      console.log(tableData.value);
    }
  });
};
//获取分类列表数据
getGoodsList().then((res) => {
  if (res.data.code === 200) {
    tableData.value = res.data.data.list;
    console.log(tableData.value);
  }
});
</script>

<style scoped lang="scss">
.data-operation {
  padding: 20px;
  border-bottom: 1px solid rgb(225, 222, 222);
  .input-box {
    display: flex;
    height: 32px;
    float: left;
    margin-right: 35px;
    .input-info {
      width: 80px !important;
      font-size: 14px;
      line-height: 32px;
      font-weight: 700;
    }
    :deep(.el-select) {
      width: 350px !important;
    }
    :deep(.el-input) {
      width: 350px !important;
    }
    :deep(.el-input__inner) {
      font-size: 12px;
      font-weight: 300 !important;
    }
    .search-name {
      float: right;
    }
  }
  .operate {
    margin-top: 20px;
  }
}
:deep(.el-table_3_column_26 .cell) {
  text-align: center;
}
</style>
